<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户</title>
    <!-- 浏览器 拿到 link 标签以后 会再次向服务器 发起请求 -->
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <header>
        <span>9466云专题</span>
        <span class="user"><span class="iconfont icon-yonghu"> </span>龙猫 ( 9466云专题 )</span>
    </header>
    <main>
        <aside>
            <div class="block"><span class="iconfont icon-home"></span>首页</div>
            <div class="block"><span class="iconfont icon-zhuantiguanli"></span>专题</div>
            <div class="block active"><span class="iconfont icon-yonhu"></span>用户</div>
            <div class="block"><span class="iconfont icon-shezhi"></span>设置</div>
            <div class="block"><span class="iconfont icon-xitongrizhi"></span>日志</div>
        </aside>
        <div id="box">
            <div class="searchbox">
                <input type="text" placeholder="搜索用户"><span class="search">搜索</span>
            </div>
            <div class="addbox"><span class="add"><span class="iconfont icon-tianjia"></span>添加用户</span> 
            </div>
            <div class="table">
                <ul class="table-head">
                    <li>邮箱(账户)</li>
                    <li>姓名</li>  
                    <li>电话</li>
                    <li>所属组</li>
                    <li>管理员</li>
                    <li>状态</li>
                    <li>操作</li>
                </ul>
                
                <div class="table-body">
                    <ul class="row">
                        <li>178884773@qq.com</li> 
                        <li>张伟</li>
                        <li>13611129070</li>
                        <li>编辑组</li>
                        <li>是</li>
                        <li>正常</li>
                        <li>
                            <span class="iconfont icon-bianji editicon" id="101"></span>
                            <span class="iconfont icon-shanchu deleteicon" id="101"></span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>178884773@qq.com</li> 
                        <li>张伟</li>
                        <li>13611129070</li>
                        <li>编辑组</li>
                        <li>是</li>
                        <li>正常</li>
                        <li>
                            <span class="iconfont icon-bianji editicon" id="101"></span>
                            <span class="iconfont icon-shanchu deleteicon" id="101"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ope">
                <span class="prev">上一页</span>
                <span class="next">下一页</span>
            </div>
        </div>
    </main>
    <div class="mask">
        <div class="content">
            <div class="line">
                 <label>邮箱</label> <input type="text" placeholder="输入邮箱">
            </div>
            <div class="line">
                 <label>姓名</label> <input type="text" placeholder="输入姓名">
            </div>
            <div class="line">
                 <label>电话</label> <input type="text" placeholder="输入电话">
            </div>
            <div class="line">
                 <input class="add" type="button" value="添加用户">
            </div>
        </div>
    </div>

    <!-- axios.min.js 文件专门用来发送ajax请求的文件, 内部会暴露出一个axios对象 -->
    <script src="./axios.min.js"></script>
    <!-- 自己的js文件 如果想要用axios来发请求, 必须在 axios.min.js 文件之后引入 -->
    <script src="./index.js"></script>

</body>
</html>